<template>
  <div id="mp">
    <mt-header title="首页">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
        <mt-button >关闭</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <!--中间区域-->
    <div class="component-child">
      <component :is="currentView" :current-name="currentView" ></component>
    </div>
    <!--底部导航-->
    <mt-tabbar v-model="currentView">
      <mt-tab-item id="Mphome">
        <img slot="icon" src="../../assets/Mphome.png">
        主页
      </mt-tab-item>
      <mt-tab-item id="classify">
        <img slot="icon" src="../../assets/classify.png">
        分类
      </mt-tab-item>
      <mt-tab-item id="cart">
        <img slot="icon" src="../../assets/cart.png">
        购物车
      </mt-tab-item>
      <mt-tab-item id="me">
        <img slot="icon" src="../../assets/me.png">
        我
      </mt-tab-item>
    </mt-tabbar>

  </div>
</template>

<script>
import Mphome from '../../components/mobilePage/Mhome'
import classify from '../../components/mobilePage/classify'
import cart from '../../components/mobilePage/cart'
import me from '../../components/mobilePage/me'

export default {
  name: 'mp',
  data () {
    return {
      msg: '首页',
      currentView: 'Mphome'
    }
  },
  methods: {
  },
  components: {
    Mphome,
    classify,
    cart,
    me
  }
}
</script>

<style lang="less">
#mp{
.component-child{
}
}
</style>
